<template>
  <div>
    <div class="tools" @click="showtools" @mouseenter="jin">
      <img src="../assets/tools.png" />
    </div>
    <div :class="ce ? 'cebian' : 'cebian dong'" @mouseenter="jin" @mouseleave="chu">
      <div class="list">
        <div v-if="isType == 0" class="li" @click="toCaozuo(6)">
          <img src="@/assets/v3/weituo.png" />
          <p>委托租售</p>
        </div>
        <div class="li" @click="toCaozuo(1)">
          <img src="../assets/fang.png" />
          <p>我的对比</p>
        </div>
        <div class="li" @click="toCaozuo(2)">
          <img src="../assets/shou.png" />
          <p>我的收藏</p>
        </div>
        <div class="li" @click="toCaozuo(3)">
          <img src="../assets/suan.png" />
          <p>贷款计算</p>
        </div>
        <div class="li" @click="toCaozuo(5)">
          <img src="../assets/ma.png" />
          <p>二维码</p>
        </div>
        <!-- <div class="li" @click="toCaozuo(4)">
          <img src="../assets/xiaoxi_a.png" />
          <p>聊天</p>
        </div> -->
      </div>
    </div>
    <chat ref="chats"></chat>
    <transition name="el-fade-in">
      <div class="erweima" v-show="ewmStatus">
        <img src="../assets/ma1.jpg" />
        <img src="../assets/ma2.jpg" />
        <i class="el-icon-close" style="position: absolute; top: 3px; color: #000; font-size: 20px" @click="yc"></i>
      </div>
    </transition>
  </div>
</template>
<script>
import chat from "./chat";
export default {
  name: "tools",
  components: {
    chat
  },
  watch: {
    ce(newV, oldV) {
      if (!newV) {
        // this.ewmStatus = false
      }
    }
  },
  data() {
    return {
      loginstate: false,
      ce: false,
      ewmStatus: false
    };
  },
  computed: {
    isType(){
      const user = JSON.parse(localStorage.getItem("userInfo") || '{}');
      return user.businessType
    },
  },
  created() {
    this.getUser();
  },
  methods: {
    yc() {
      this.ewmStatus = !this.ewmStatus;
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    showtools() {
      console.log(123213);
      this.ce = true;
    },
    jin() {
      this.ce = true;
    },
    chu() {
      this.ce = false;
    },
    toCaozuo(type) {
      console.log(type);
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
      // 不拦截二维码
      if (type == 5) {
        this.ewmStatus = !this.ewmStatus;
        return;
      }

      if (this.loginstate) {
        switch (type) {
          case 1:
            this.openUrl("/my/bbcz/myToolCz");
            break;
          case 2:
            this.openUrl("/my/bbcz/collectgz");
            break;
          case 3:
            this.openUrl("/my/bbcz/loanCalculator");
            break;
          case 4:
            if (this.loginstate) {
              this.$refs.chats.chatOpne();
            } else {
              this.$message({
                message: "请登录！",
                type: "error",
                offset: 120,
                duration: 2000
              });
            }

            break;
          case 5:
            this.ewmStatus = !this.ewmStatus;
            break;
          case 6:
            // 委托出售
            this.delegate();
            // this.openUrls("/my/bbcz/commissionRental", {});

            break;
        }
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.cebian {
  position: fixed;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  background: #ffffff;
  box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.16);
  opacity: 1;
  z-index: 1000;
  transition: all 1s;

  .list {
    position: absolute;
    width: 100px;
    top: 50%;
    transform: translateY(-50%);

    .li {
      margin-bottom: 40px;
      cursor: pointer;

      img {
        width: 40px;
        height: 40px;
        margin-left: 50%;
        transform: translateX(-50%);
      }

      p {
        width: 100px;
        color: #333333;
        text-align: center;
      }
    }
  }
}

.dong {
  opacity: 0;
  right: -80px;
}

.tools {
  position: fixed;
  right: 0px;
  top: 50%;
  z-index: 1000;
}

.erweima {
  position: fixed;
  right: 120px;
  top: 50%;
  z-index: 200;
  background-color: #f7f0f0;
  padding: 20px;
  border-radius: 5px;

  img {
    width: 150px;
    height: 150px;
  }
}
</style>
